<template>
  <div class="medical_reform_detection">
       <el-row :gutter="20">
        <el-col :span="7">
          <div class="grid-content bg-purple">
            <div class="Histogram-box">
              <div class="comtitle">
                <p>医保情况</p>
              </div>
              <div class="top-mapbox">
                <div class="left-firstmap"><left-first-map></left-first-map></div>
                <div class="left-middlemap"><span>人均筹资总额：15896元</span><left-middle-map></left-middle-map></div>
              </div>
            </div>
             <div class="Circular-box">
               <div class="comtitle">
                <p>分级诊疗</p>
              </div>
              <div class="bottom-mapbox">
                <div class="menzhen"><men-zhen></men-zhen></div>
                <div class="chuyuan"><chu-yuan></chu-yuan></div>
              </div>
             </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="middle-box">
            <div class="comtitle">
                <p>基本公共卫生服务</p>
              </div>
              <div class="middle-textBox">
                <div class="middle-text">
                  <span>高血压患者管理人数</span>
                  <span class="number">246</span>
                  <span>(人)</span>
                </div>
                <div class="middle-text">
                  <span>糖尿病规范管理人数</span>
                  <span class="number">246</span>
                  <span>(人)</span>
                </div>
                <div class="middle-text">
                  <span>严重精神障碍患者人数</span>
                  <span class="number">246</span>
                  <span>(人)</span>
                </div>
                <div class="middle-text">
                  <span>居民健康档案电子建档率</span>
                  <span class="number">46</span>
                  <span>%</span>
                </div>
              </div>
              <div class="middle-map"><middle-map></middle-map></div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content bg-purple">
            <div class="comtitle">
                <p>公立医院改革</p>
              </div>
              <div class="right-firstmap">
                <right-First-map></right-First-map>
                </div>
              <div class="right-middlemap"><RightMiddleMap></RightMiddleMap></div>
              <div class="right-bottommap"><RightBottomMap></RightBottomMap></div>
          </div>
        </el-col>
      </el-row>
  </div>
</template>

<script>
import MiddleMap from './medical_reform_detection/middlemap.vue';
import RightFirstMap from './medical_reform_detection/right_firstmap.vue'
import RightMiddleMap from './medical_reform_detection/right_middlemap.vue'
import RightBottomMap from './medical_reform_detection/right_bottommap.vue'
import LeftFirstMap from './medical_reform_detection/left_firstmap.vue'
import LeftMiddleMap from './medical_reform_detection/left_middlemap.vue'
import MenZhen from './medical_reform_detection/menzhen.vue'
import ChuYuan from './medical_reform_detection/chuyuan.vue'
export default {
  name: 'medical_reform_detection',
  components: {MiddleMap ,RightFirstMap ,RightMiddleMap ,
  RightBottomMap, LeftFirstMap, LeftMiddleMap, MenZhen, ChuYuan},
  data () {
    return {
    }
  }
}
</script>

<style lang='scss'  rel="stylesheet/scss" >
body{
    width: 100%;
    height: 100%;
    background:url('../../assets/images/screen/medical_service/screen_bg.jpg');
    background-size:100% 100%;
    color:#fff;
    position: fixed;
}
</style>

<style lang='scss'  rel="stylesheet/scss" scoped>
.medical_reform_detection{
    padding: 0 14px;
    .Histogram-box{
      height: 60vh;
    }
    .Circular-box{
      height: 30vh
    }
    .comtitle{
        height: 4vh;
        font-size: 18px;
        font-weight: bold;
        padding-top: 15px;
        margin-left: 18px;
      }
    .middle-box{
      width: 100%;
      .middle-textBox{
        height: 10vh;
        text-align: center;
        .middle-text{
          width: 23%;
          height: 8vh;
          background:url('../../assets/images/screen/medical_reform_detection/text_background.png') no-repeat;
          background-size: 100% 100%;
          display: inline-block;
          margin-left: 14px;
          margin-top:22px;
        }
        .middle-text p{
          line-height: 2
        }
        .middle-text span{
          line-height: 1.7
        }
        .number{
          font-size: 32px;
        }
      }
      .middle-map{
        width: 100%;
        height: 76vh
      }
    }
    .left-firstmap{
      height: 27vh;
    }
    .left-middlemap{
      height: 28vh;
    }
    .left-middlemap span{
      font-size:14px;
      position: relative;
      float: right;
      top: 21px;
      right: 65px;
    }
    .menzhen{
      height: 13vh;
    }
    .chuyuan{
      height: 13vh;
    }
    .right-firstmap{
      margin-top: -10px;
      height: 28vh;
    }
    .right-middlemap{
      height: 30vh;
    }
    .right-bottommap{
      height: 29vh;
    }
}
</style>
